{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block main %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"签到签退",back:1} %}

    <div class="bdtso" v-if="type == 'in'">
        <div v-if="minDistance > 1000">
            <div class="padt20 fs30 flrc">
                <mu-button @click="showToast('未达到签到条件')" fab large color="grey400">
                    <mu-icon value="how_to_reg"></mu-icon>
                </mu-button>
            </div>
            <div class="tac pad5 c12">用户签到</div>
        </div>
        <div v-if="minDistance < 1000">
            <div class="padt20 fs30 flrc">
                <mu-button @click="signIn()" fab large color="green600">
                    <mu-icon value="how_to_reg"></mu-icon>
                </mu-button>
            </div>
            <div class="tac pad5">用户签到</div>
        </div>
    </div>
    <div class="bdtso" v-if="type == 'out'">
        <div v-if="minDistance > 1000">
            <div class="padt20 fs30 flrc">
                <mu-button @click="showToast()" fab large color="grey400">
                    <mu-icon value="how_to_reg"></mu-icon>
                </mu-button>
            </div>
            <div class="tac pad5 c12">用户签退</div>
        </div>
        <div v-if="minDistance < 1000">
            <div class="padt20 fs30 flrc">
                <mu-button @click="signOut()" fab large color="green600">
                    <mu-icon value="how_to_reg"></mu-icon>
                </mu-button>
            </div>
            <div class="tac pad5">用户签退</div>
        </div>
    </div>
    <div class="bdtso">
        <div class="list-style-1 mart10 marb5">签到区域</div>
        <div class="flrc fs8 pad5">
            <div class="c12">附近签到点</div>
            <div class="flex1 padl5">[[minName]]</div>
            <div>距您 [[minDistance]] 米</div>
        </div>
    </div>



    <div class="bdtso">
        <div class="flrc fs14 pad5" v-if="minDistance < 1000">
            <div class="flex1 fs10 c12">已到达规定区域</div>
            <mu-icon size="24" value="sentiment_very_satisfied" color="green"></mu-icon>
        </div>
        <div class="fs8 pad5" v-if="minDistance > 1000">
            <div class="flrc fs14">
                <mu-icon size="34" value="sentiment_very_dissatisfied" color="red"></mu-icon>
                <div class="flex1 fs10 c12">未达到签到指定区域,请尝试：</div>
            </div>
            <div class="padl10">打开GPS提高定位准度</div>
            <div class="padl10 padt3">请靠近签到点1km以内范围</div>
            <div class="padl10 padt3">联系管理员添加附近为签到点</div>
            <div class="pad10 padt3">
                <mu-button round full-width @click="getLoc()">重新定位</mu-button>
            </div>

        </div>
    </div>
    {#<div class="bdtso">#}
        {#<div class="list-style-1 mart10 marb5">工作任务</div>#}
        {#<mu-ripple class="flrc fs8 pad5 pos-r" @click="goto('sitePicker')">#}
            {#<div class="flex1">#}
                {#<div v-if="!boole(curSite.id)">请选择</div>#}
                {#<div v-if="boole(curSite.id)">[[curSite.name]]</div>#}
            {#</div>#}
            {#<div><span class="fa fa-angle-right"></span></div>#}
        {#</mu-ripple>#}
    {#</div>#}
    {#<div class="bdtso" v-if="type == 'in'">#}
        {#<div class="list-style-1 mart10 marb5">签到记录</div>#}
        {#<div class="pad10">#}
            {#<div class="flrc c12 pad3 bdbda" v-for="item in list">#}
                {#<div class="flex1">2019/05/04 11:04:01</div>#}
                {#<div class="fa fa-check"></div>#}
            {#</div>#}
        {#</div>#}
    {#</div>#}
    {#<div class="bdtso" v-if="type == 'out'">#}
    <div class="bdtso">
        <div class="list-style-1 mart10 marb5">历史记录</div>
        <div class="padl5 padr5 lh15">
            <div class="bc13 c12 fs8 pad5 bdbda ofe mart5" v-for="item in list">
                <div class="flex-r">
                    <div class="bcf fs14 pad5 c11 round5">
                        [[item.SiteUserWorkLog_start_Time.substr(0,10)]]
                    </div>
                </div>

                <div class="c11 fs10 ofe pad5">工作任务：[[item.Site_name]]</div>
                <div class="flrc pad5">
                    <div class="flex-r flex1">
                        <div class="">签到：</div>
                        <div v-if="boole(item.SiteUserWorkLog_start_Time)">[[item.SiteUserWorkLog_start_Time]]</div>
                        <div v-if="!boole(item.SiteUserWorkLog_start_Time)">
                            <span class="c2 fa fa-warning"></span>
                        </div>
                    </div>
                    <div class="flex-r flex1">
                        <div class="">签退：</div>
                        <div v-if="boole(item.SiteUserWorkLog_end_Time)">[[item.SiteUserWorkLog_end_Time]]</div>
                        <div v-if="!boole(item.SiteUserWorkLog_end_Time)">
                            <span class="c3 fa fa-warning"></span>
                        </div>
                    </div>
                </div>
                {#<div>[[item.SiteUserWorkLog_name]]</div>#}
            </div>
        </div>
    </div>

    {#<div class="pad10 fs8">#}
        {#[[testMessage]]#}
    {#</div>#}
{% endblock %}